import React from 'react';
import classNames from 'classnames';

class TimeItem extends React.Component {
  constructor(props) {
    super(props);
    this.reset(props);
  }

  g_color = () => {
    switch (this.props.current) {
      case 1:
        return '#fa8c16';
      case 2:
        return '#1890ff';
      default:
        return 'rgba(0, 0, 0, 0.25)';
    }
  };
  reset = (props) => {
    const {leftWidth, iconSize} = props;
    this.size = {
      left: {
        width: leftWidth,
        paddingTop: iconSize / 2
      },
      leftContent: {
        width: leftWidth
      },
      right: {
        marginLeft: iconSize + 16,
        width: `calc(100% - ${leftWidth + iconSize + 8 + 16 + 8 + 10}px)`
      },
      icon: {
        top: iconSize,
        left: leftWidth + 8,
        width: iconSize,
        height: iconSize,
        background: this.g_color()
      },
      tail: {
        left: leftWidth + (iconSize / 2) + 8,
        top: (iconSize * 2) + 5 + 10,
        height: `calc(100% - ${(iconSize * 2) + 25}px)`
      },
      leftArrow: {
        top: iconSize / 2
      }
    };
  };
  size = {};

  render() {
    const {prefix, left, right} = this.props;
    let cls = classNames(`${prefix}-item`);
    return (
      <div className={cls}>
        <div className={`${prefix}-tail`} style={this.size.tail} />
        <div className={`${prefix}-icon`} style={this.size.icon} />
        <div className={`${prefix}-left`} style={this.size.left}>
          <div className={`${prefix}-left-content`} style={this.size.leftContent}>
            {left}
          </div>
        </div>
        <div className={`${prefix}-right`} style={this.size.right}>
          <div className={`${prefix}-right-arrow`} style={this.size.leftArrow} />
          <div className={`${prefix}-right-content`}>
            {right}
          </div>
        </div>
      </div>
    )
  }
}

export default TimeItem;
TimeItem.defaultProps = {
  prefix: 'ymm-time-line',
  leftWidth: 80,
  iconSize: 20
};
